<template>


	<view class="content">

		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="@/static/lunbo1.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="@/static/lunbo2.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="@/static/lunbo3.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="@/static/lunbo4.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="@/static/lunbo5.png"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="kong">

			</view>
		</view>


		<!-- <headTop></headTop> -->
		<view class="scroll-view-container" show-scrollbar="false">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" show-scrollbar="true" :style="{height:wh + 'px'}">
				<block v-for="(item,index) in leftList" :key="new Date()">
					<!-- {{ index + ","+active   }} -->

					<view
						:class="['left-scroll-view-item',  index  == active ? 'active' :'',item.active == '' ? '' : item.active ]"
						@click="changeActive(index)">
						<view class="leftImg">
							<img :src=item.src alt="">
						</view>
						<p> {{item.typeName}}</p>
					</view>
				</block>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="right-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
				<block v-for="(item,i) in rightList" :key="i">
					<view class="right-content">
						<view class="right-img">
							<img :src=item.src alt="">
						</view>
						<view class="right-detail">
							<p>{{item.typeName + ""+ item.sizeName}}</p>
							<!-- <span class="goodsDetail">{{item.sizeName}}</span> -->
							<span class="goodsDetail">库存：{{item.num?item.num:0}}</span>
							<view class="price">
								<!-- <span>￥{{item.price/item.unitPrice}}</span> -->
								<span>￥{{(item.price/100).toFixed(2)}}</span>
								<!-- <span class="addBtn" @click="addCart(item)">+</span> -->

								<span v-if="item.numberChoise > 0" class="addBtn addBtnss"
									@click="changeVal('-',item)">-</span>
								<span>{{item.numberChoise ?item.numberChoise:0}}</span>
								<span class="addBtn" @click="changeVal('+',item)">+</span>

							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>


		<view>
			<uni-popup ref="inputDialog" type="dialog">

				<view class="popupDia">
					<p>{{dialogVal.typeName}}</p>
					<p>库存{{dialogVal.sizeName}}</p>
					<p class="pto"><span>数量:</span>
						<view class="uni-form-item uni-column" style="padding-right: 10rpx;">
							<input class="uni-input" style="padding-left: 10rpx;" type="number" v-model="inputNumber" />
						</view>
						张
					</p>
					<view class="addR">
						<span class="addBtn addBtnss" @click="changeVal('-')">-</span>
						<span>{{item.numberChoise}}</span>
						<span class="addBtn" @click="changeVal('+')">+</span>
					</view>

					<view class="button-dio">
						<button @click="cancelAddcart"
							style="border-bottom-right-radius: 0rpx;border-bottom-left-radius:20rpx">取消</button>
						<button @click="confirmAddCart"
							style="border-bottom-left-radius: 0rpx;border-bottom-right-radius: 20rpx">确定</button>
					</view>
				</view>

			</uni-popup>
		</view>

		<view class="botton-at">
			<span v-if="cartNum != 0">{{cartNum}}</span>
			<button type="default" class="addcar" @click="myCar"><img src="@/static/gouwuche1.png" alt="">购物车</button>
		</view>


	</view>



</template>

<script>
	import headTop from "@/components/common/headTop/headTop.vue"
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'

	export default {
		data() {
			return {
				// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
				wh: 0,
				inputVal: 5,
				title: 'Hello',
				numberPercent: '',
				active: 0,
				cartNum: 0, //购物车 数量
				myCart: [],
				inputNumber: 5,
				dialogVal: [], // 点击添加购物车的数据
				leftList: [], //左侧数据
				rightListAll: [], //右边所有数据
				rightList: [], // 有边数据
				addCarts: [], //加入购物车数据
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000
			}
		},
		components: {
			headTop,
		},
		watch: {
			rightList(newVal, oldVal) {

				console.log(newVal);
				console.log(oldVal)

			}

		},
		onShow() {
			let cartArr = uni.getStorageSync('cart') // 购物车信息
			if (!cartArr) {
				this.myCart = []
				this.cartNum = 0

			} else {
				this.myCart = JSON.parse(cartArr)
				this.cartNum = this.myCart.length > 0 ? this.myCart.length : 0;
			}

			// this.active = 0
			let _this = this
			console.log('请求首页商品左侧数据 linenType/getLinenType')
			this.$request.post('linenType/getLinenType').then(res => {
				console.log("收到首页商品左侧数据 linenType/getLinenType", res)
				this.leftList = res.data //首页左侧数据
				this.leftList.map(item => {
					if (item.typeName == '床单') {
						item.src = '../../static/chuangdan1.png'
					} else if (item.typeName == '被套') {
						item.src = '../../static/beitao1.png'
					} else if (item.typeName == '枕套') {
						item.src = '../../static/zhentou1.png'
					} else if (item.typeName == '毛巾') {
						item.src = '../../static/maojin1.png'
					}
				})
			})

			console.log('请求添加商品加入购物车倍数 linenPrice/getPackageNum')
			this.$request.post('linenPrice/getPackageNum').then(res => {
				console.log('收到添加商品加入购物车倍数 linenPrice/getPackageNum', res)
				// this.numberPercent = res.data[0] //首页购物车倍数
				this.numberPercent = 10 //首页购物车倍数
			})

			let userPhone = this.$store.state.name
			let password = this.$store.state.password

			console.log('请求首页商品右侧数据 linenPrice/getLinenByType', {
				userPhone,
				password,
				userType: 2
			})
			this.$request.post('linenPrice/getLinenByType', { //商品右侧数据
				userPhone,
				password,
				userType: 2
			}).then(res => {
				console.log('收到首页商品右侧数据 linenPrice/getLinenByTypee', res)
				if (res.data && res.data.length > 0) {
					this.rightListAll = res.data
				}
				console.log('请求首页商品右侧数据对应的库存 linen/queryLinenInfoByItem', {
					'status': 8
				})
				this.$request.post('linen/queryLinenInfoByItem', {
					'status': 8
				}).then(ress => {


					console.log('请求首页商品右侧数据对应的库存 linen/queryLinenInfoByItem', ress)
					this.rightListAll.map((item, index) => { //商品右侧数据对应的库存
						if (item.typeName == '床单') {
							item.src = '../../static/chuangdan.png'
						} else if (item.typeName == '被套') {
							item.src = '../../static/beitao.png'
						} else if (item.typeName == '枕套') {
							item.src = '../../static/zhentou1111.png'
						} else if (item.typeName == '毛巾') {
							item.src = '../../static/maojin111.png'
						}
						for (let i = 0; i < ress.data.length; i++) {
							// let sizeId = ress.data[i].linenSizeId;
							if (ress.data[i].linenSizeName == item.sizeName && ress.data[i]
								.linenTypeName == item
								.typeName) {


								// item.num = ress.data[i].num ? ress.data[i].num : 0 ; //代表商品数量
								if (ress.data[i].num == null || ress.data[i].num == undefined) {
									item.realyNum = 0
									item.num = 0
								} else {
									item.realyNum = ress.data[i].num
									item.num = ress.data[i].num
								}


							}
						}

						console.log('请求首页商品右侧数据对应的库32442存 linen/queryLinenInfoByItem', this
							.rightListAll)

						//加减操作

					})

					//  不能放里面处理   
					console.log("开始处理前购物车的数据", this.myCart)
					let obj = {};
					if (this.myCart.length > 0) {
						this.myCart.map((itm, index) => {
							console.log(itm)
							if (itm != null || itm != undefined) {
								obj[itm.priceId] = {
									num: itm.numberChoise,
									copyItm: itm
								}
							}

						})
					}
					console.log("整理后的购物车的数据", obj)
					this.rightListAll.map(ite => {
						let sizeId = ite.linenSizeId
						let priceId = ite.priceId
						let linenTypeId = ite.linenTypeId
						let typeName = ite.typeName
						if (obj[priceId]) {
							console.log("374627846278346278468736", obj[priceId].copyItm)

							let items = obj[priceId].copyItm
							if (items.linenSizeId == sizeId && items.linenTypeId == linenTypeId &&
								items.typeName == typeName) {
								console.log("找到linenSizeId对应的数据", obj[priceId])
								console.log("找到linenSizeId对应的数据", obj[priceId].num)
								console.log("找到linenSizeId对应的数据", obj[priceId].num)
								ite.num -= obj[priceId].num //itm.num 是库存  numberChoise
								// ite.realyNum -= obj[sizeId].num?obj[sizeId].num:0
								ite.numberChoise = obj[priceId].num
								if (ite.num < 0) {
									ite.numberChoise = 0
									console.log("购物车存在  但是没有库存", obj[priceId])
									delete obj[priceId]
								} else {
									// ite.numberChoise = 0
									console.log("购物车存在  但是没有库存", obj[priceId])
									delete obj[priceId]
								}
							}
							// this.myCart = listArr
						}


					})
					console.log("首次购物车过滤", this.myCart)
					uni.setStorageSync('cart', JSON.stringify(this.myCart))
					// console.log ("是否", ite.numberChoise )


					this.rightList = this.rightListAll.filter((item) => {
						return item.typeName == this.leftList[this.active].typeName //默认取第一个值
					})
					this.rightList = this.sortArr(this.rightList)
					this.changeActive(this.active)
					console.log("347623874578245627563", this.rightList)
				})
			}).then(res => {
				// console.log(res)
			})

		},
		onLoad(option) {
			if (option.active) {
				this.active = option.active
			}
			let sys = uni.getSystemInfoSync()
			this.wh = sys.windowHeight - 190 // 滑动可视区
		},
		methods: {
			changeActive(index) { // 点击左侧切换数据 
				this.active = index
				this.leftList.map((item, i) => {
					item.active = ''

					if (index == (i + 1)) {
						item.active = 'tops'
					}
					if (index == (i - 1)) {
						item.active = 'buttons'
					}
				})
				this.rightList = this.rightListAll.filter((item) => {
					return item.typeName == this.leftList[index].typeName
				})
				this.rightList = this.sortArr(this.rightList)


			},
			//添加商品到购物车
			addCart(item) {
				this.$refs.inputDialog.open()
				this.dialogVal = item
				if (!item.num || item.num == 0) {
					return uni.showToast({
						title: '加入购物车失败,该商品没有库存',
						duration: 1500,
						icon: "error"
					});
				}
			},
			getAddCartNum() {
				let cartArr = uni.getStorageSync('cart') // 购物车信息
				if (cartArr != null && cartArr != undefined) {
					this.myCart = JSON.parse(cartArr)
					this.cartNum = this.myCart.length > 0 ? this.myCart.length : 0;
				} else {
					this.myCart = []
					this.cartNum = 0
				}
			},
			//跳转购物车
			myCar() {
				uni.navigateTo({
					url: '/pages/car/myCar/myCar?active=' + this.active
				})

			},

			changeVal(val, item) {
				//商品数据加减
				// console.log(  item.numberChoise  )
				let numberChoise = 0;
				let flag = false
				if (item.numberChoise == null || item.numberChoise == undefined) {
					numberChoise = 0
				} else {
					numberChoise = item.numberChoise
				}

				if (val == '-') {
					console.log(numberChoise - this.numberPercent)
					if ((numberChoise - this.numberPercent) <= 0) {
						numberChoise = 0
					} else {
						numberChoise -= this.numberPercent
					}

					this.rightList.map(itm => {
						if (itm.linenSizeId == item.linenSizeId) {
							if (itm.num == itm.realyNum) {
								return flag = true
							}
							itm.numberChoise = numberChoise
							itm.num = itm.realyNum - numberChoise

						}
					})

				} else {

					this.rightList.map(itm => {
						if (itm.linenSizeId == item.linenSizeId) {
							// itm.numberChoise = numberChoise
							console.log("货物i代号为甲方和", itm.num)
							if (itm.num != undefined) {
								console.log("货物i代号为甲方和2432423 ", itm.num)
								// return  flag = true 
								if (itm.numberChoise >= itm.realyNum) { // 
									numberChoise -= this.numberPercent
									return flag = true
								} else {
									numberChoise += this.numberPercent
									itm.numberChoise = numberChoise
								}

								if (itm.num - this.numberPercent >= 0) { //库存 - 加入购物车的数量 == 0 
									itm.num -= this.numberPercent
									// flag = true
								} else {
									numberChoise-= this.numberPercent
									itm.numberChoise = numberChoise
									return flag = true
								}
							} else {
								console.log("flag", flag)
								return flag = true
							}
						}
					})

				}


				if (flag) {
					return wx.showToast({
						title: '值必须小于库存哦',
						content: '',
						icon: 'none'
					})
				}

				let isInclude = false
				console.log("添加进购物车之前 是否有数据", this.myCart)
				this.myCart.map((itemss, index) => {
					if (itemss.linenSizeId == item.linenSizeId && itemss.linenTypeName == item.linenTypeName &&
						itemss.typeName == item.typeName) {
						isInclude = true
						// const addNum = itemss.number + this.dialogVal.number
						itemss.numberChoise = numberChoise
						// return item.number = this.dialogVal.number
					}
					if (itemss.numberChoise == 0) {
						this.myCart.splice(index, 1)
					}

				})

				if (!isInclude) {
					this.myCart.push(item)
				}
				uni.setStorageSync('cart', JSON.stringify(this.myCart))
				this.getAddCartNum()
				this.rightList.push({})
				this.rightList.pop()



			},
			cancelAddcart() {
				//点击取消
				this.inputNumber = 5
				this.$refs.inputDialog.close()
			},
			//点击确定加入购物车
			confirmAddCart() {
				//将商品存倒本地啊

				// console.log( this.inputNumber )
				if (this.inputNumber < 0 || this.inputNumber % this.numberPercent !== 0) {
					return wx.showToast({
						title: `输入的值必须大于0且${this.numberPercent}是的倍数`,
						content: '',
						icon: 'none'
					})
				}
				if (this.inputNumber > this.dialogVal.num) {
					return wx.showToast({
						title: '输入的值必须小于库存哦',
						content: '',
						icon: 'none'
					})
				}
				this.dialogVal.number = this.inputNumber

				let isInclude = false

				this.addCarts.map((item) => {
					if (item.linenSizeId == this.dialogVal.linenSizeId) {
						isInclude = true
						const addNum = item.number + this.dialogVal.number
						item.number = addNum
						// return item.number = this.dialogVal.number
					}
				})


				if (!isInclude) {
					this.addCarts.push(this.dialogVal)
				}

				//这里需要操作dom 
				// this.rightList.map(items => {
				// 	console.log(items)
				// 	this.addCarts(itm => {
				// 		console.log(itm)
				// 		if (items.linenSizeId == itm.linenSizeId && items.linenTypeId == itm.linenTypeId) {
				// 			// if( )
				// 		}
				// 	})
				// })


				uni.setStorageSync('cart', JSON.stringify(this.addCarts))


				//  采用for循环写法
				/* let isInclude = false
			   for(let i = 0;i<this.addCarts.push()[i].length;i++){
				   let item = this.addCarts[i]
				   if(item.linenSizeId == this.dialogVal.linenSizeId){
					   item.number = this.dialogVal.number
					   this.addCarts[i] = item
					   isInclude = true
					   break
				   } 
			   }
			   */
				// map写法  商品添加购物车

				this.$refs.inputDialog.close()
			},
			// 点击下单
			toPay() {
				uni.navigateTo({
					url: '/pages/payDetail/payDetail/payDetail'
				})
			},
			//查看订单
			lookOrder() {
				uni.navigateTo({
					url: "/pages/order/order/order"
				})
			},
			//库存
			storage() {
				uni.navigateTo({
					url: "/pages/kucun/kucun/kucun"
				})
			},
			//封装排序
			sortArr(arr) {
				arr.sort((a, b) => {
					let a1 = a.sizeName.substr(0, a.sizeName.length - 1)
					let b1 = b.sizeName.substr(0, b.sizeName.length - 1)

					return a1 - b1

				})
				return arr
			}

		}
	}
</script>

<style lang="scss">
	.scroll-view-container {

		display: flex;

		.left-scroll-view {
			width: 120px;

			.left-scroll-view-item {
				width: 160rpx;
				height: 180rpx;
				// line-height: 130rpx;
				color: #7A7E83;
				// "color": "#7A7E83",
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				background-color: #f7f7f7;
				text-align: center;
				font-size: 14px;

				// 激活项的样式
				&.active {
					background-color: #ffffff;
					position: relative;
					color: rgb(140, 199, 181);

					// 渲染激活项左侧的红色指示边线
					&::before {
						content: ' ';
						display: block;
						width: 3px;
						height: 30px;
						background-color: rgb(140, 199, 181);
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.right-content {
			display: flex;
			justify-content: space-around;
			border-bottom: 4rpx solid rgb(247, 247, 247);

			.right-img {
				img {
					width: 230rpx;
					height: 180rpx;
					margin-top: 12rpx;
					border-radius: 10rpx;
					transform: scale(0.8);
				}
			}

			.right-detail {

				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 230rpx;
				// align-items: center;
				flex-wrap: wrap;

				p {
					font-weight: 700;
					text-align: left;
					padding: 20rpx 0;
				}

				.goodsDetail {
					padding-right: 12rpx;
					font-size: 24rpx;
				}

				.price {
					padding: 16rpx 0;
					font-weight: 700;
					display: flex;
					justify-content: space-between;

					span:nth-child(2) {
						margin-left: 20rpx;
					}

					span:nth-child(3) {
						margin: 0 13rpx;
					}
				}

			}
		}
	}

	.popupDia {
		background-color: #ffffff;
		width: 550rpx;
		height: 300rpx;
		border-radius: 30rpx;
		padding-top: 20rpx;
		position: relative;

		.addR {
			position: absolute;
			top: 153rpx;
			right: 30rpx;

			span {

				margin: 0 10rpx;
			}
		}

		p {

			height: 60rpx;
			line-height: 60rpx;
			margin-left: 20rpx;

			span {
				margin-right: 20rpx;
			}

			input {
				width: 140rpx;
				border: 1px solid rgb(203, 203, 203);
				border-radius: 5px;
			}
		}

		.pto {
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.button-dio {
			margin-top: 28rpx;
			display: flex;
			justify-content: space-around;
			border-bottom: 0;
			align-items: center;

			p {
				margin-left: 20rpx;
				vertical-align: middle;

			}

			button {
				background-color: #fff;
				width: 50%;
			}
		}
	}

	.botton-at {
		position: fixed;
		width: 160rpx;

		bottom: 0rpx;

		span {
			background-color: red;
			color: white;
			width: 30rpx;
			height: 30rpx;
			text-align: center;
			line-height: 30rpx;
			border-radius: 50%;
			position: absolute;
			z-index: 9999;
			// font-weight: 700;
			font-size: 20rpx;
			top: 2rpx;
			right: -2rpx;
		}

		.addcar {

			height: 80rpx;
			color: #7A7E83;
			line-height: 80rpx;
			font-size: 24rpx;
			width: 170rpx;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			margin: 0;
			background-color: #ffffff
		}
	}

	.tops {
		border-bottom-right-radius: 20rpx !important;
	}

	.buttons {
		border-top-right-radius: 20rpx !important;
	}

	.leftImg {
		height: 120rpx;

		img {
			width: 120rpx;
			height: 120rpx;
			object-fit: cover;
		}
	}

	// .addBtn {
	//   // border-radius: ;
	// }
	.addBtnss {
		margin-right: 0rpx;
	}

	.swiper {
		height: 350rpx;
	}

	.swiper-item {
		width: 100vw;
		height: 450rpx;

		image {
			width: 100vw;
			height: 100%;
			// object-fit: cover;
		}
	}

	.kong {
		width: 100vw;
		height: 100rpx;
		background-color: #fff !important;
		margin-top: -50rpx;
		z-index: 99;
		border-top-left-radius: 30rpx;

	}
</style>